<template>
  <v-app-bar
    absolute
    app
    color="transparent"
    flat
    height="75"
    style="width: auto"
  >
    <v-btn
      class="mr-3"
      fab
      small
      @click="
        $vuetify.breakpoint.smAndDown
          ? setDrawer(!drawer)
          : $emit('input', !value)
      "
    >
      <v-icon v-if="value"> mdi-view-quilt </v-icon>
      <v-icon v-else> mdi-dots-vertical </v-icon>
    </v-btn>

    <v-toolbar-title
      class="hidden-sm-and-down font-weight-light"
      v-text="$route.name"
    />

    <v-spacer />

    <v-text-field
      label="搜索"
      color="secondary"
      hide-details
      class="mb-2"
      style="max-width: 265px"
    >
      <template v-if="$vuetify.breakpoint.mdAndUp" v-slot:append-outer>
        <v-btn class="mt-n2" fab small>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
      </template>
    </v-text-field>

    <div class="mx-3" />

    <v-btn class="ml-2" min-width="0" text to="/dashboard">
      <v-icon>mdi-view-dashboard</v-icon>
    </v-btn>

    <v-menu
      bottom
      left
      offset-y
      origin="top right"
      transition="scale-transition"
    >
      <template v-slot:activator="{ attrs, on }">
        <v-btn class="ml-2" min-width="0" text v-bind="attrs" v-on="on">
          <v-badge color="red" overlap bordered>
            <template v-slot:badge>
              <span>{{ notificationsCount }}</span>
            </template>

            <v-icon>mdi-bell</v-icon>
          </v-badge>
        </v-btn>
      </template>

      <v-list v-if="notificationsCount > 0" :tile="false" nav>
        <div>
          <app-bar-item
            v-for="(n, i) in notifications"
            :key="`item-${i}`"
            class="list-item-custom"
          >
            <v-list-item-title v-text="n.title" />
          </app-bar-item>
        </div>
      </v-list>
    </v-menu>

    <v-menu
      bottom
      left
      offset-y
      origin="top right"
      transition="scale-transition"
    >
      <template v-slot:activator="{ attrs, on }">
        <v-btn class="ml-2" min-width="0" text v-bind="attrs" v-on="on">
          <v-icon>mdi-account</v-icon>
        </v-btn>
      </template>

      <v-list :tile="false" flat nav>
        <template v-for="(item, i) in usersetting">
          <app-bar-item
            v-if="item.settingType === 1"
            :key="`seetingItem-${i}`"
            :to="item.href"
            class="list-item-custom"
          >
            <v-list-item-title v-text="item.text"></v-list-item-title>
          </app-bar-item>
          <div v-else-if="item.settingType === 2" :key="`seetingItem-${i}`">
            <v-divider class="mb-2 mt-2"></v-divider>
            <v-list-item @click="logout()" class="list-item-custom">
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item>
          </div>
        </template>
      </v-list>
    </v-menu>
  </v-app-bar>
</template>

<style lang="sass">
.list-item-custom
    min-height: 30px !important
    min-width: 200px !important
</style>

<script>
// Components
import { VHover, VListItem } from "vuetify/lib";

// Utilities
import { mapState, mapActions, mapMutations } from "vuex";

export default {
  name: "GlobalCoreAppBar",

  components: {
    AppBarItem: {
      render(h) {
        return h(VHover, {
          scopedSlots: {
            default: ({ hover }) =>
              h(
                VListItem,
                {
                  attrs: this.$attrs,
                  class: {
                    "black--text": !hover,
                    "white--text secondary elevation-12": hover,
                  },
                  props: {
                    activeClass: "",
                    dark: hover,
                    link: true,
                    ...this.$attrs,
                  },
                },
                this.$slots.default
              ),
          },
        });
      },
    },
  },

  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },

  created() {
    this.getNoticeList();
  },

  data: () => ({
    options: {
      page: 1, //当前页码
      itemsPerPage: 10, //每页多少条
      pageStart: 1, //起始页码
      pageStop: 1, //终止页码
      sortBy: ["publicTime"], //排序列
      sortDesc: [true], //排序列是否倒叙
    },
    notificationsCount: 0,
    notifications: [],
    usersetting: [
      {
        settingType: 1,
        text: "编辑资料",
        href: {
          path: "/account/user-profile",
        },
      },
      {
        settingType: 2,
        text: "退出系统",
      },
    ],
  }),

  computed: {
    ...mapState({ drawer: (state) => state.app.drawer }),
  },

  methods: {
    ...mapMutations({
      setDrawer: "SET_DRAWER",
    }),
    ...mapActions(["Logout"]),
    logout() {
      var that = this;
      that.$dialog.confirm({
        text: "您确定要退出当前系统吗?",
        title: "警告",
        icon: "mdi-alert-circle",
        actions: [
          {
            text: "取消",
            key: false,
          },
          {
            text: "确定",
            color: "primary",
            key: true,
            handler: function () {
              that.logoutConfirm();
            },
          },
        ],
      });
    },
    logoutConfirm() {
      var that = this;
      this.Logout()
        .then(() => {
          setTimeout(() => {
            window.location.reload();
          }, 300);
        })
        .catch((err) => {
          console.log(err);
          that.$dialog.notify.error(err.msg, {
            position: "top-right",
            timeout: 3000,
          });
        });
    },
    getNoticeList() {
      var that = this;
      that.request
        .post("/api/notice/receivedPage", {
          page: that.options.page,
          itemsPerPage: that.options.itemsPerPage,
          sortBy: that.options.sortBy,
          sortDesc: that.options.sortDesc,
          type: 0,
        })
        .then((res) => {
          that.notifications = res.data.records;
          that.notificationsCount = res.data.total;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
